<template>
<div id="app">
<transition name="appTab" mode="out-in">
  <router-view class="contBox"/>
</transition>
</div>
</template>

<script>
export default {
  name:'App',
  data:()=>({
  }),
  watch:{
  },
  mounted(){
  },
  methods:{
  }
}
</script>

<style lang="scss" type="text/scss">
@import "assets/css/reset.css";
@import "assets/css/common.scss";
body{
  font-size:12px;
  #app{
    background-color:#FFF;
    .contBox{
      flex-direction:column;
      overflow-y:auto;
    }
  }
}
.appTab-enter-active,.appTab-leave-active{
  transition:all .2s;
}
.appTab-enter{
  transform:translateX(-30px);
  opacity:0;
}
.appTab-enter-to{
  transform:translateX(0);
  opacity:1;
}
.appTab-leave{
  transform:translateX(0);
  opacity:1;
}
.appTab-leave-to{
  transform:translateX(30px);
  opacity:0;
}
</style>
